<template>
  <div class="use-list" :style="plain ? 'border:none':''">
    <div class="use-list-meta">
      <div class="use-list-meta-title">{{ title }}</div>
      <div class="use-list-meta-content">
        <template v-if="description">{{ description }}</template>
        <template v-else><slot></slot></template>
      </div>
    </div>
    <div class="use-list-action">
      <span class="action" @click="action()">{{ actionText }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineProps({
  title: String,
  description: {type:String,default:''},
  plain:{type:Boolean,default:false},
  action:{type:Function,default:()=>{}},
  actionText:{type:String,default:''}
})
</script>

<style scoped>
  .use-list{
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f0f0f0;
    height: 52px;
  }
  .use-list-meta{
    display: flex;
    gap: 16px;
    align-items: center;
  }
  .use-list-meta-title {
    text-align: right;
    width: 80px;
    color: rgba(0, 0, 0, .65);
  }
  .use-list-action {
    color: var(--color-primary);
  }
   .use-list-action:hover{
    cursor: pointer;
    color: var(--color-primary-hover);
    transition: var(--transition);
   }
</style>